<template>
  <div class="head-box">
    <div class="container">
      <div class="hello">
        您好：欢迎来到食谷产业平台！
        <span class="ml10" v-if='!userName'>
          <router-link to="/login">
            <span class="login-btn">请登录</span>
          </router-link>
          <router-link to="/register">免费注册</router-link>
        </span>
        <span class="ml10 return" v-else @click="back">{{ userName }}【退出】</span>
      </div>
      <div class="nav-box">
        <el-menu
          :default-active="$route.path"
          :router="true"
          mode="horizontal"
          background-color="#F5F5F5"
          text-color="#00182e"
          active-text-color="#13C228"
          menu-trigger="click"
          @select="handleSelect"
        >
          <!-- <el-menu-item index="/">
            <i class="iconfont">&#xe60d;</i>
            <span slot="title">首页</span>
          </el-menu-item> -->
          <!-- <el-submenu index="2">
            <template slot="title">
              <i class="iconfont">&#xe620;</i>
              <span slot="title">产品商城</span>
            </template>
            <el-menu-item class="spc-item" index="/mall/materials">原辅料采购</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/logistics">仓储物流</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/food">食品机械</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/brand">品牌中心</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/security">食品质量安全</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/finance">金融服务</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/personnel">人才服务</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/retailers">电商服务</el-menu-item>
            <el-menu-item class="spc-item" index="/mall/research">科技研发</el-menu-item>
          </el-submenu> -->
          <!-- <el-menu-item index="/release">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">发布中心</span>
          </el-menu-item> -->
          <el-menu-item index="/individual">
            <!-- <i class="el-icon-user-solid"></i> -->
            <span slot="title">我的食谷</span>
          </el-menu-item>
          <el-menu-item index="/consult">
            <!-- <i class="iconfont">&#xe628;</i> -->
            <span slot="title">我的消息</span>
          </el-menu-item>
          <el-menu-item index="/help">
            <!-- <i class="iconfont">&#xe623;</i> -->
            <span slot="title">客户服务</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Head",
  data() {
    return {};
  },
  computed: {
    userName() {
      return this.$store.state.xbsgUserInfo.userName;
    },
  },
  methods: {
    handleSelect(key, keyPath) {},
    back() {
      this.$store.commit("SET_TOKEN", "");
      this.storage.removeToken();
      this.$store.commit("XBSG_SET_USERINFO", "");
      this.storage.remove("xbsgUserInfo");
      this.$router.push({
        path: "/",
      });
    },
  },
};
</script>
<style lang="scss" >
.el-menu--popup-bottom-start,
.el-menu,
.el-menu--popup {
  margin-top: 0px !important;
}
.el-menu--popup-bottom-start {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
}
.spc-item {
  width: 50%;
}
</style>
<style scoped lang="scss">
@import "@/style/color.scss";
.head-box {
  height: 30px;
  background: $headColor;
  color: $themeColor;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .container {
    width: $bigWidth;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    .hello {
      line-height: 30px;
      .ml10 {
        margin-left: 10px;
      }
      .return {
        cursor: pointer;
      }
      .login-btn {
        color: $greenColor;
        margin-right: 4px;
      }
    }

    .nav-box {
      height: 50px;

      ::v-deep .el-menu {
        border-bottom: none;
        .el-menu-item,
        .el-submenu__title {
          height: 30px;
          line-height: 30px;
          border: none;
          font-size: 12px;
          padding: 0 10px;
        }
        .iconfont {
          margin-right: 5px;
        }

        .el-submenu__icon-arrow,
        .el-icon-arrow-down {
          color: #fff;
        }
      }
    }
  }
}
</style>
